{% extends "orga/base.html" %}

{% load copyable %}
{% load i18n %}
{% load static %}
{% load compress %}
{% load context_urls %}
{% load i18n %}
{% load static %}
{% load html_signal %}

{% block scripts %}
    {% compress js %}
        <script defer src="{% static 'vendored/zxcvbn.js' %}"></script>
        <script defer src="{% static 'common/js/password_strength.js' %}"></script>
        <script defer src="{% static "common/js/copy.js" %}"></script>
        <script defer src="{% static "common/js/user_token.js" %}"></script>
    {% endcompress %}
{% endblock %}

{% block nav_top_header %}
    <a href="#" style="text-decoration: none; color: inherit;">
        <div id="nav-search" class="dropdown-toggle summary-div" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <div class="d-flex justify-content-between align-items-center">
                <span id="search-context-icon" class="fa-stack fa-lg">
                    <i class="fa fa-circle fa-stack-2x"></i>
                    <i class="fa fa-user fa-stack-1x fa-inverse"></i>
                </span>
                <div id="search-context-text">
                    <span class="context-name font-weight-bold">{% translate "Account" %}</span>
                </div>
            </div>
        </div>
        <div id="nav-search-input-wrapper" class="d-none dropdown-content dropdown-menu dropdown-menu-left" aria-labelledby="nav-search" data-source="{% url 'orga:nav.typeahead' %}" data-event-typeahead data-organizer="{% if request.event %}{{ request.event.organizer.pk }}{% elif request.organizer %}{{ request.organizer.pk }}{% endif %}">
            <div class="query-holder">
                <div class="form-box">
                    <input type="search" class="form-control" placeholder="{% translate 'Search' %} (Alt + k)" data-typeahead-query>
                </div>
            </div>
            <ul id="search-results">
            </ul>
        </div>
    </a>
{% endblock %}

{% block extra_title %}{% translate "User settings" %} :: {% endblock extra_title %}
{% block content %}
    <fieldset class="m-2">
        <legend id="user">{% translate "User settings" %}</legend>
        {% include "orga/includes/base_form.html" with form=profile_form submit_name="form" submit_value="profile" %}
    </fieldset>

    <fieldset class="m-2 password-input-form">
        <legend id="login">{% translate "Login settings" %}</legend>
        {% include "orga/includes/base_form.html" with form=login_form submit_name="form" submit_value="login" %}
    </fieldset>

    {% if user.teams.all.exists %}
        <fieldset class="m-2">
            <legend>{% translate "API Access" %}</legend>
            <p>
                {% blocktranslate trimmed with apiurl='href="/api/events/" target="_blank" rel="noopener"' docurl='href="https://docs.pretalx.org/api/" target="_blank" rel="noopener"' %}
                    API tokens can be used to access the <a {{ apiurl }}>pretalx API</a>.
                    To find out more, please have a look at the <a {{ docurl }}> API documentation</a>.
                {% endblocktranslate %}
            </p>
            <div class="token-list mb-4">
                {% if tokens %}
                    <h5>{% translate "Your API tokens" %}</h5>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>{% translate "Name" %}</th>
                                <th class="text-center">{% translate "Version" %}</th>
                                <th>{% translate "Events" %}</th>
                                <th>{% translate "Last used" %}</th>
                                <th>{% translate "Created" %}</th>
                                <th>{% translate "Valid until" %}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for token in tokens %}
                                <tr class="{% if not token.is_active %}bg-muted{% endif %}">
                                    <td>{{ token.name }}</td>
                                    <td class="text-center">
                                        <span class="text-{% if not token.is_latest_version %}danger{% else %}success{% endif %}">
                                            {{ token.version|default:'-' }}
                                        </span>
                                        {% if not token.is_latest_version and token.is_active %}
                                            <form method="post">
                                                {% csrf_token %}
                                                <button name="tokenupgrade" value="{{ token.pk }}" class="btn btn-outline-info btn-sm">
                                                    {% translate "Updgrade" %}&nbsp;({{ current_version }})
                                                </button>
                                            </form>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <ul>
                                            {% for event in token.events.all %}
                                                <li><a href="{{ event.orga_urls.base }}">{{ event.name }}</a></li>
                                            {% endfor %}
                                        </td>
                                        <td>{{ token.last_used|date:"SHORT_DATETIME_FORMAT"|default:"-" }}</td>
                                        <td>{{ token.created|date:"SHORT_DATETIME_FORMAT" }}</td>
                                        <td>{{ token.expires|date:"SHORT_DATETIME_FORMAT"|default:"-" }}</td>
                                        <td>
                                            {% if token.is_active %}
                                                <form method="post" class="d-inline">
                                                    {% csrf_token %}
                                                    <button type="submit" name="revoke" value="{{ token.id }}" class="btn btn-danger btn-sm">
                                                        {% translate "Revoke" %}
                                                    </button>
                                                </form>
                                            {% endif %}
                                        </td>
                                    </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                {% else %}
                    <p>{% translate "You don't have any API tokens yet." %}</p>
                {% endif %}
            </div>

            <div id="create-token">
                <h4 class="d-inline-flex">{% translate "Create new token" %}</h4>
                <form method="post">
                    {% csrf_token %}

                    {{ token_form.name.as_field_group }}
                    {{ token_form.events.as_field_group }}
                    {{ token_form.expires.as_field_group }}
                    {{ token_form.permission_preset.as_field_group }}

                    <div class="form-group row" id="permission-endpoints">
                        <div class="col-md-3"></div>
                        <div class="col-md-9 table-responsive">
                            <table class="table table-condensed table-flip no-hover">
                                <thead>
                                    <tr>
                                        <th></th>
                                        {% for option in token_form.fields.endpoint_events.choices %}
                                            <th class="text-center">{{ option.1 }}</th>
                                        {% endfor %}
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for name, field in token_form.get_endpoint_fields %}
                                        <tr>
                                            <th class="text-right">{{ field.label }}</th>
                                            {% for option in field.field.choices %}
                                                <td class="text-center">
                                                    <input type="checkbox" name="{{ field.name }}" value="{{ option.0 }}" id="id_{{ field.name }}_{{ option.0 }}" {% if option.0 in field.initial %}checked{% endif %}>
                                                </td>
                                            {% endfor %}
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {% include "orga/includes/submit_row.html" with submit_name="form" submit_value="token" %}
                </form>
            </div>
        </fieldset>

    {% endif %}

    {% html_signal "eventyay.common.signals.profile_bottom_html" sender=request.event user=user orga="true" %}
{% endblock content %}
